<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" />
		<link rel="stylesheet" type="text/css" href="../css/aui.css" />
		<style>
			#box {
				background: #ffffff;
				height: 106px;
				width: 100%;
				position: fixed;
				left: 0;
				bottom: -106px;
				-webkit-transform: translate3d(0px,-106px,0px);
				-moz-transform: translate3d(0px,-106px,0px);
				transform: translate3d(0px,-106px,0px);
				transition: all 0.3s;
				visibility: hidden;
			}
			#box a {
				display: block;
				width: 100%;
				text-align: center;
				height: 40px;
				background: #fff;
				color: #333;
				line-height: 40px;
				border-bottom: 1px solid #ebebeb;
				font-size: 16px;
				position: relative;
				margin-bottom: 6px;
			}
			.btn {
				margin-top: 0.1rem;
				margin-bottom: 2rem;
				text-align: center
			}
			.btn button {
				width: 90%;
				outline: none;
				border: none;
				background: #009bdb;
				color: #fff;
				height: 40px;
				display: inline-block;
				border-radius: 0.4rem;
				font-size: 16px;
			}
			body {
				background: #ffffff;
			}
		</style>
	</head>
	<body>
		<header class="aui-bar aui-bar-nav aui-bar-light">
			<a class="aui-pull-left aui-btn" tapmode onclick="goBack()">
					<span class="aui-iconfont aui-icon-left"></span>
			</a>
			<div class="aui-title">
				创建直播间
			</div>
		</header>
		<div class="aui-content aui-margin-b-15" id="my-video-main">
			<ul class="aui-list aui-media-list">
						<li class="aui-list-item aui-list-item-middle">
								<div class="aui-media-list-item-inner">
									<div class="aui-list-item-label aui-border-r aui-text-center">标题</div>
									<div class="aui-list-item-input aui-padded-l-10">
											<input type="text"  placeholder="输入标题" id="title" >

											<input type="hidden" value=""  id="tupian" >
									</div>
								</div>
						</li>

				</ul>

				<ul class="aui-list aui-media-list">
						<li class="aui-list-item aui-list-item-middle">
								<div class="aui-media-list-item-inner">
									<div class="aui-list-item-label aui-border-r aui-text-center">直播间简介</div>
									<div class="aui-list-item-input aui-padded-l-10">
											<input type="text"  placeholder="请输入简介" id="login_name" >
									</div>
								</div>
						</li>

				</ul>
		</div>
		<div class="aui-list-item-label aui-border-r aui-text-center">请上传封面</div>
		<!-- 进度条-->
		<!-- <div class="aui-progress aui-progress-xxs" style="margin-bottom: 1rem">
			<div class="aui-progress-bar" id="jd"></div>
		</div> -->
		<!-- 头像显示区域-->
		<div class="aui-card-list" onclick="upimg()">
			<div class="aui-card-list-content" id="tx" style="padding: 2rem">
				<img src="../image/up.png" />
			</div>
		</div>
		<section class="aui-content-padded login-sub">
        <div class="aui-btn aui-btn-block aui-btn-info" tapmode onclick="fnLogin()">开始直播</div>
    	</section>
		<!-- 操作按钮-->
		<div id="box">
			<a>操 作</a>
			<div class="btn" onclick="save()">
				<button>
					开始裁剪
				</button>
			</div>

		</div>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/common.js" ></script>
	<script type="text/javascript">
		apiready = function() {
			api.setStatusBarStyle({
				style : 'light',
				color : '#000'
			});
			api.parseTapmode();
			$api.fixStatusBar($api.dom('header'));
			api.addEventListener({
				name : 'keyback'
			}, function(ret, err) {
				api.toast({
					msg : '再点一次退出应用',
					duration : 2000,
					location : 'bottom'
				});
				api.addEventListener({
					name : 'keyback'
				}, function(ret, err) {
					api.closeWidget({
						silent : true
					});
				});
				setTimeout(function() {
					exitApp();
				}, 2000)
			});
		};
		function upimg() {
			api.actionSheet({
				title : '上传照片',
				cancelTitle : '取消',
				buttons : ['拍照', '手机相册']
			}, function(ret, err) {
				if (ret) {
					getPicture(ret.buttonIndex);
				}
			});
		}

		function getPicture(sourceType) {
			//相机拍照
			if (sourceType == 1) {
				api.getPicture({
					sourceType : 'camera',
					encodingType : 'jpg',
					mediaValue : 'pic',
					allowEdit : false,
					destinationType: 'base64',//选择图片编码格式base64
					quality : 96,
					saveToPhotoAlbum : false
				}, function(ret, err) {
					// 获取拍照图像并剪辑
					if (ret) {
						$api.byId('box').style.visibility = 'visible';
						var FNImageClip = api.require('FNImageClip');
						FNImageClip.open({
							rect : {
								x : 0,
								y : 0,
								w : api.winWidth,
								h : api.winHeight - document.querySelector('#box').offsetHeight
							},
							srcPath : ret.data,
							mode : 'image',
							style : {
								mask : 'rgba(0,0,0,0.75)',
								clip : {
									w : 200,
									h : 200,
									x : (api.frameWidth - 200) / 2,
									y : (api.frameHeight - 200) / 2,
									borderColor : '#0f0',
									borderWidth : 1,
									appearance : 'rectangle'
								}
							},
						}, function(ret, err) {
						});
					}
				});
			} else if (sourceType == 2) {
				//手机相册选图片
				var obj = api.require('UIMediaScanner');
				obj.open({
					type : 'picture',
					column : 4,
					max : 1,
					sort : {
						key : 'time',
						order : 'desc'
					},
					texts : {
						stateText : '已选择*项',
						cancelText : '取消',
						finishText : '完成'
					},
					styles : {
						bg : '#fff',
						mark : {
							icon : '',
							position : 'bottom_right',
							size : 20
						},
						nav : {
							bg : '#eee',
							stateColor : '#000',
							stateSize : 18,
							cancleBg : 'rgba(0,0,0,0)',
							cancelColor : '#000',
							cancelSize : 18,
							finishBg : 'rgba(0,0,0,0)',
							finishColor : '#000',
							finishSize : 18
						}
					}
				}, function(ret) {
					//将选择的图像进行剪辑
					if (ret.eventType == 'cancel') {
					} else if (ret.list.length > 0) {
						$api.byId('box').style.visibility = 'visible';
						var FNImageClip = api.require('FNImageClip');
						FNImageClip.open({
							rect : {
								x : 0,
								y : 0,
								w : api.winWidth,
								h : api.winHeight - document.querySelector('#box').offsetHeight
							},
							srcPath : ret.list[0].path,
							mode : 'image',
							style : {
								mask : 'rgba(0,0,0,0.75)',
								clip : {
									w : 200,
									h : 200,
									x : (api.frameWidth - 200) / 2,
									y : (api.frameHeight - 200) / 2,
									borderColor : '#0f0',
									borderWidth : 0,
									appearance : 'rectangle'
								}
							},
						}, function(ret, err) {
						});
					}
				});
			}
		}
		/**
	 * 重置裁剪组件
	 */
				function resetImageClip(){
					var FNImageClip = api.require('FNImageClip');
								FNImageClip.reset();
				}
				/**
				* 关闭裁剪组件
				*/
			 function closeImageClip(){
				 var FNImageClip = api.require('FNImageClip');
							 FNImageClip.close();
			 }
			 /**
				*返回
			 */
			 function back() {
				 var FNImageClip = api.require('FNImageClip');
											 closeImageClip();
											 api.closeFrame({
															 name : 'w_imageclip_frame'
											 });
			 }

		//保存剪辑图像
		function save() {
			var FNImageClip = api.require('FNImageClip');
			var nubs = nub(1000, 3000);
			FNImageClip.save({
				destPath : 'fs://tx_' + nubs + '.jpg',
				copyToAlbum : false,
				quality : 1
			}, function(ret, err) {
					console.log('.111..'+$api.jsonToStr(ret));
				$api.byId('box').style.visibility = 'hidden';
				var tx = ret.destPath;

				FNImageClip.close();
				//上传剪辑后的图像到服务器
				//设置需要预览的img的src的值为选择图片后对应的base64Data数据
					var trans = api.require('trans');
											trans.decodeImgToBase64({
											    imgPath: tx
											}, function(ret, err) {
											    if (ret.status) {
														str = ret.base64Str;
														api.ajax({
																url: 'http://www.qiersan.com/live/live/uploads',//上传到TP5后台控制器方法
																method: 'post',
																data: {
																		values: {
																				image: "data:image/png;base64," + str//直接通过传递变量的方式传递base64编码后的图片数据
																		},
																}
														}, function(ret, err) {

															$api.val($api.byId('tupian'),ret.data);
															//上传进度
														if (ret) {
																$api.byId('tx').innerHTML ='<img src="http://data.lmyyst.com/' + ret.data + '">';
																api.toast({
																	msg : '上传成功',
																	duration : 3000,
																	location : 'bottom'
																});
															}

														});
											    } else {
											        console.log(JSON.stringify(err));

											    }
											});

			});
		}

		function nub(minNum, maxNum) {
			switch(arguments.length) {
				case 1:
					return parseInt(Math.random() * minNum + 1);
					break;
				case 2:
					return parseInt(Math.random() * (maxNum - minNum + 1) + minNum);
					break;
				default:
					return 0;
					break;
			}
		}
		//开始直播
		function fnLogin(){

		  var title =  $api.val($api.byId('title'));
			if (title=="") {
					alert('请填写标题');return;
			}
			var login_name =  $api.val($api.byId('login_name'));
			if (login_name=="") {
					alert('请填写简介');return;
			}
			var image =  $api.val($api.byId('tupian'));
			if (image=="") {
					alert('请上传封面');return;
			}
			var tupian='http://data.lmyyst.com/'+image;
		  var userid= $api.getStorage('userid');
		  $api.post(baseUrl+'live/live/creatroom',{
		  body: 'String',values:{title:title,intro:login_name,live_cover:tupian,user_id:userid}
		},function(ret){
			// var newret = JSON.stringify(ret);
			  var newret = JSON.parse(ret);
				if(newret.code==0){
					alert(newret.msg);return;
				}
						//监听
					api.sendEvent({
		    	name: 'hidebtn',
					extra: {
		                 state: 'no'
		             }
				});

			  rtmp_url = newret.pushurl;
				live_id=newret.live_id;
				$api.setStorage('live_id',live_id);
		  if(rtmp_url != '' && rtmp_url != undefined && rtmp_url != null){
		    if(rtmp_url.indexOf("rtmp://") == -1){
		        _WXUI.alert('仅支持rtmp流');
		        return ;
		    }
		  }
		  var data = {
		      rtmp_url:rtmp_url,
		      resolution:720,
		      direction:0
		  };
			$api.post(baseUrl+'live/live/my_video',{
			body: 'String',values:{user_id:userid}
		},function(ret){
				var newret = JSON.parse(ret);
			if(newret.code==1){
				$api.setStorage('creattime', newret.data.created_at);
				$api.setStorage('title', newret.data.title);
				$api.setStorage('rid', newret.data.rid);
				$api.setStorage('pushurl', newret.data.pushurl);
				$api.setStorage('live_cover', newret.data.live_cover);

			}
		},'text');


		  openFrm('video_push_frm',data);
		},'text');

		}
	</script>
</html>
